<style lang="less">
</style>
<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
              <Form-item label="围栏名称">
                <Input
                  type="text"
                  v-model="searchForm.fenceName"
                  :clearable="true"
                  placeholder="请输入围栏名称"
                  style="width: 200px"
                />
              </Form-item>
              <Form-item label="车牌号">
                <Input
                  type="text"
                  v-model="searchForm.licnum"
                  :clearable="true"
                  placeholder="请输入车牌号"
                  style="width: 200px"
                />
              </Form-item>
              <Form-item style="margin-left:-35px;" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                <Button @click="handleReset">重置</Button>
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="unBind" type="primary" icon="md-cut" v-has="'unbind'">解锁绑定</Button>
            <circleLoading v-if="operationLoading" />
          </Row>
          <Row>
            <Alert show-icon>
              已选择
              <span class="select-count">{{selectCount}}</span> 项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row>
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              :current="searchForm.current"
              :total="total"
              :page-size="searchForm.size"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10,20,50,100]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getCarFencePageList, unbindFence } from "@/api/operate";
import circleLoading from "../../my-components/circle-loading.vue";
import { fenceDict, plateColorSelect } from "@/libs/dict";
export default {
  name: "fence-manage",
  components: {
    circleLoading
  },
  data() {
    return {
      fenceDict: fenceDict,
      plateColorSelect: plateColorSelect,
      loading: true,
      operationLoading: false,
      selectCount: 0,
      selectList: [],
      searchForm: {
        licnum: "",
        fenceName: "",
        current: 1,
        size: 20
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "围栏名称",
          key: "fenceName",
          minWidth: 150
        },
        {
          title: "围栏类型",
          key: "fenceType",
          width: 180,
          render: (h, params) => {
            return h(
              "span",
              this.fenceDict.find(item => {
                return item.value == params.row.fenceType;
              }).label
            );
          }
        },
        {
          title: "设备名称",
          key: "deviceName",
          width: 180
        },
        {
          title: "设备编号",
          key: "deviceNum",
          width: 180
        },
        {
          title: "卡号",
          key: "simCard",
          width: 150
        },
        {
          title: "IMEI",
          key: "imei",
          width: 160
        }
      ],
      data: [],
      total: 0
    };
  },
  methods: {
    init() {
      this.getCarFenceList();
    },
    changePage(v) {
      this.searchForm.current = v;
      this.getCarFenceList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.getCarFenceList();
    },
    getCarFenceList() {
      // 多条件搜索
      this.loading = true;
      getCarFencePageList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.data = res.data.records;
          this.total = res.data.total;
          this.selectCount = 0;
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.getCarFenceList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.fenceName = "";
      this.searchForm.licnum = "";
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      // 重新加载数据
      this.getCarFenceList();
    },
    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    unBind() {
      console.log(this.selectList);
      if (this.selectCount == 0) {
        this.$Message.warning("请先勾选解绑列");
        return;
      }
      let deviceFenceList = this.selectList.map(item => {
        return {
          carFenceId: item.carFenceId,
          fenceId: item.fenceId,
          fenceType: item.fenceType,
          deviceId: item.deviceId
        };
      });
      this.$Modal.confirm({
        title: "确认解除绑定",
        content: "您确认要解除已勾选的绑定围栏 ?",
        loading: true,
        onOk: () => {
          unbindFence({ deviceList: deviceFenceList }).then(res => {
            if (res.code == 0) {
              this.$Message.success("解绑成功");
              this.$Modal.remove();
              this.getCarFenceList();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>